<template>
	<div class="padding-across-10">
		<headerOpreate style="padding-bottom: 3px;float: left;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="main">
			<div class="card" style="width: 39%;">
				<div class="card-title">
					<p>{{templateObj.name}}</p>
				</div>
				<div class="card-body">
					<img style="cursor: pointer" title="点击查看高清大图" v-bind:src="imgUrl" @click="dialogImg = true" />
					<div class="detail">
						<dl>
							<dt style="margin-top: 0;">作者：</dt>
							<dd style="margin-top: 0;">{{templateObj.author}}</dd>
						</dl>
						<dl>
							<dt>出版年份：</dt>
							<dd v-if="tableData.pubdate && tableData.pubdate != ''">{{tableData.pubdate}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<dl>
							<dt>出版社：</dt>
							<dd v-if="tableData.publisher && tableData.publisher != ''">{{tableData.publisher}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<dl>
							<dt>页数：</dt>
							<dd v-if="tableData.pages && tableData.pages != ''">{{tableData.pages}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<dl>
							<dt>定价：</dt>
							<dd v-if="tableData.price && tableData.price != ''">{{tableData.price}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<dl>
							<dt>类型：</dt>
							<dd v-if="templateObj.type && templateObj.type != ''">{{templateObj.type}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<dl>
							<dt>ISBN：</dt>
							<dd v-if="templateObj.isbn && templateObj.isbn != ''">{{templateObj.isbn}}</dd>
							<dd v-else>未知</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="card" style="width: 61%; border-left: 1px dashed #9A998F;padding-left: 10px;">
				<!--<div class="detail-title">作者介绍 · · · · · ·</div>-->
				<el-tag type="success" style="width: 100%;font-size: 15px;"><i class="fa fa-user-circle" style="padding-right: 5px;"></i>作者介绍 · · · · · ·</el-tag>
				<div class="detail-body">
					<section>
						<p v-if="tableData.author_intro && tableData.author_intro != ''">
							&#x3000;&#x3000;{{tableData.author_intro}}
						</p>
						<p v-else>
							<el-tag type="danger">对不起，暂无该作者相关信息</el-tag>
						</p>
					</section>
				</div>
			</div>
		</div>
		<div class="main" style="margin-bottom: 30px;">
			<div class="card" style="width: 39%;padding-right: 10px;">
				<!--<div class="detail-title">管理信息 · · · · · ·</div>-->
				<el-tag type="success" style="width: 100%;font-size: 15px;"><i class="fa fa-bars" style="padding-right: 5px;"></i>管理信息 · · · · · ·</el-tag>
				<div class="card-body" style="padding-top: 20px;">
					<div class="detail" style="margin-left: 0px;">
						<dl>
							<dt style="margin-top: 0;">书籍标签：</dt>
							<dd style="margin-top: 0;">{{templateObj.tag}}</dd>
						</dl>
						<dl>
							<dt>书籍条码：</dt>
							<dd>{{templateObj.barcode}}</dd>
						</dl>
						<dl>
							<dt>书籍上架时间：</dt>
							<dd>{{templateObj.bindtime}}</dd>
						</dl>
						<dl>
							<dt>书籍更新时间：</dt>
							<dd>{{templateObj.updatetime}}</dd>
						</dl>
						<dl v-if="templateObj.borrowtime != ''">
							<dt>最近一次借阅：</dt>
							<dd v-if="templateObj.borrowtime != ''">{{templateObj.borrowtime}}</dd>
							<dd v-else>未知</dd>
						</dl>
						<!--<dl>
							<dt>应归还时间：</dt>
							<dd v-if="templateObj.duetime != ''">{{templateObj.duetime}}</dd>
							<dd v-else>未知</dd>
						</dl>-->
						<dl v-if="templateObj.returntime != ''">
							<dt>还书时间：</dt>
							<dd>{{templateObj.returntime}}</dd>
						</dl>
						<dl v-if="templateObj.returntime == '' && templateObj.duetime != ''">
							<dt>到期时间：</dt>
							<dd>{{templateObj.duetime}}</dd>
						</dl>
						<dl>
							<dt>书籍状态：</dt>
							<dd>
								<el-tag type="danger" v-if="this.templateObj.status === 1">丢失</el-tag>
								<el-tag type="warning" v-if="this.templateObj.status === 2">外借</el-tag>
								<el-tag type="success" v-if="this.templateObj.status === 3">在库</el-tag>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="card" style="width: 61%; border-left: 1px dashed #9A998F;padding-left: 10px;">
				<!--<div class="detail-title">内容简介 · · · · · ·</div>-->
				<el-tag type="success" style="width: 100%;font-size: 15px;"><i class="fa fa-comments" style="padding-right: 5px;"></i>内容简介 · · · · · ·</el-tag>
				<div class="detail-body">
					<section>
						<p v-if="tableData.summary && tableData.summary != ''">
							&#x3000;&#x3000;{{tableData.summary}}
						</p>
						<p v-else>
							<el-tag type="danger">对不起，暂无内容简介</el-tag>
						</p>
					</section>
				</div>
			</div>
			<el-dialog :visible.sync="dialogImg" id="img-diglog" :show-close="false">
				<img v-bind:src="imgUrl" />
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import { HttpServer } from '../../../../../assets/js/common.js';
	import imgDefault from '../../../../../assets/images/l_book-default-large.png'
	import headerOpreate from '../../../../../components/headerOpreate'
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				imgUrl: '',
				tableData: {},
				dialogImg: false,
				opreateDatas: [{
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					{
						size: "small",
						type: "primary",
						icon: "el-icon-eleg-icon_cloud-download el-icon--left",
						name: "更新",
						action: "updateDouBanInfo"
					},
					{
						size: "small",
						type: "danger",
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "deleteDouBanInfo"
					}
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			backPrev() {
				this.$emit('backPrev');
			},
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//更新豆瓣信息
			updateDouBanInfo() {
				HttpServer.httpPost.call(this, '/Api/Book/Update/Douban', {
					isbn: [this.templateObj.isbn]
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(response.data.info[0].code === 0) {
							this.$notify({
								title: '成功',
								message: '图书信息更新成功',
								type: 'success',
								duration: 2500
							});
							this.getDoubanDatas();
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.info[0].msg,
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//删除豆瓣信息
			deleteDouBanInfo() {
				this.$confirm('此操作将删除书籍信息，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					HttpServer.httpPost.call(this, '/Api/Book/Delete/Douban', {
						isbn: [this.templateObj.isbn]
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.$notify({
								title: '成功',
								message: '数据删除成功',
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: '数据删除失败',
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			//刷新
			reloadDatas() {
				HttpServer.httpPost.call(this, '/Api/Book/Update/Douban', {
					isbn: [this.templateObj.isbn]
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.getDoubanDatas();
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getDoubanDatas() {
				HttpServer.httpGet.call(this, '/Api/Book/Info/Douban?isbn=' + this.templateObj.isbn, function(response) {}, function(response) {
					// console.log('douban', response);
					if(response.data.code === 0) {
						if(response.data.info) {
							this.tableData = response.data.info;
							this.imgUrl = response.data.info.images.large;
							// console.log('this.imgUrl',this.imgUrl)
						} else {
							this.imgUrl = imgDefault;
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			}
		},
		created() {
			// console.log('this.templateObj',this.templateObj);
			this.getDoubanDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@title-color: #44AFFF;
	@hui-color: #9A998F;
	@lan-color: #3377AA;
	* {
		box-sizing: border-box;
	}
	
	.padding-across-10 {
		@media only screen and (max-width: 1200px) {
			.main {
				width: 960px;
			}
		}
		@media only screen and (min-width: 1200px) {
			.main {
				width: 100%;
			}
		}
		.main {
			margin-top: 20px;
			min-height: 300px;
			/*border: 1px solid blue;*/
			display: flex;
			.card {
				width: 50%;
				/*border: 1px solid red;*/
				/*padding: 0px 10px;*/
				.card-title {
					color: chocolate;
					font-size: 24px;
					margin-bottom: 20px;
				}
				.card-body {
					display: flex;
					img {
						height: 210px;
					}
					.detail {
						margin-left: 20px;
						dl {
							font-size: 14px;
							clear: left;
							dt,
							dd {
								display: inline-block;
								margin-top: 13px;
							}
							dt {
								color: @hui-color;
							}
						}
					}
				}
				.detail-title {
					height: 31px;
					color: green;
				}
				.detail-body {
					font-size: 14px;
					section {
						margin-top: 20px;
					}
				}
			}
		}
	}
</style>
<style lang="less" scope>
	#img-diglog {
		/*.el-dialog--small {
			width: auto !important;
		}
		.el-dialog__body {
			overflow: visible !important;
		}*/
		text-align: center;
		.el-dialog {
			background: none;
			box-shadow: none;
		}
		.el-dialog__body {
			overflow: visible !important;
		}
	}
</style>